<template>
  <div id="root">
    <div class="index_container">
      <div class="index_mainContainer">
        <div class="index_playContainer">
          <div class="index_playContainer_inner">
            <div class="index_container_inner_inner">
              <div class="styles_container">
                <div class="index__container">
                  <video-player
                    id="videoPlayer"
                    class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid"
                    :style="{width:playerOptions.width+'px',height:'auto'}"
                    x-webkit-airplay="allow"
                    webkit-playsinline
                    playsinline
                    x5-video-player-type="h5"
                    x5-video-player-fullscreen="true"
                    preload="auto"
                    :options="playerOptions"
                  ></video-player>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="video-detail" class="index_sidebarContainer">
        <Tabs class="index_itemsContainer" value="name1">
          <TabPane label="直播详情" name="name1">
            <div class="index_detailsContainer index_container_details">
              <h1 class="conf-name">{{ confName }}</h1>
              <p class="index_detailItems">
                <img src="../../assets/photo/time.png" alt="time" />
                {{ startTime }}
              </p>
              <p class="index_detailItems">
                <img src="../../assets/photo/time.png" alt="time" />
                <a>{{ endTime }}</a>
              </p>
              <p class="index_detailItems">
                <img src="../../assets/photo/position.png" alt="time" />
                <a>{{ sponsor }}</a>
              </p>
              <hr />
              <p class="index_detailItems">详情</p>
            </div>
          </TabPane>
          <TabPane label="聊天" name="name2">
            <chat style="width:100%; height:calc(100% - 50px);"></chat>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { Request } from "../../commons/Request"
import * as ResUtil from "../../commons/ResUtil"
import deviceRecognize from "../../commons/deviceRecognize"
import chat from "../chat"
import StoreUtils from '../../commons/StoreUtils'
import * as Const from '../../commons/Const'

const deviceInfo = deviceRecognize();
if (deviceInfo.devicePlatform == "PC") {
  require("../../assets/css/show.css");
} else {
  require("../../assets/css/show_m.css");
}

// 是否生产环境
const isProduction = process.env.NODE_ENV === "production";

export default {
  name: "show",

  components: {
    chat
  },

  data() {
    return {
      // 页面加载后请求获取值
      confName: '',
      startTime: '',
      endTime: '',
      sponsor: '',
      appId: '',

      // 播放器选项
      playerOptions: {
        overNative: true,
        autoplay: false,
        controls: true,
        loop: false,
        fluid: true,
        techOrder: ["html5"],
        sourceOrder: true,
        html5: { hls: { withCredentials: false } },
        sources: [
          {
            withCredentials: false,
            type: "application/x-mpegURL",
            src: Const.M3U8_DEFAULT
          }
        ],
        poster: isProduction ? "/video-vue/static/images/logo.png" : "/static/images/logo.png",
        controlBar: { fullscreenToggle: true },
        width: window.screen.width
      },
      deviceInfo
    };
  },

  // 页面创建完成
  created: function() {
    // 检查是否直接进入
    if (StoreUtils.getValue(Const.SN) == null) {
      // 转到验证页面
      this.$router.push("/");
    }

    // 获取直播会议信息
    Request({
      url: Const.API_CONF_INFO,
      method: "post",
      data: { billingCode: StoreUtils.getValue(Const.SN) }
    }).then(res => {
      if (ResUtil.isSuccess(res)) {
        // 设置会议详情
        this.confName = res.value.confName;
        this.startTime = "开始时间: " + res.value.startTime;
        this.endTime = "结束时间: " + res.value.endTime;
        this.sponsor = res.value.sponsor;

        // 正在直播, 播放直播地址
        if (StoreUtils.getValue(Const.LIVE_URL) != null) {
          this.playVideo(StoreUtils.getValue(Const.LIVE_URL));
        }
      }
    });
  },

  // 监听数据变化
  watch: {
    '$store.state.living': {
      handler: function(newValue, oldValue) {
        // 直播开始
        if (newValue) {
          // 请求播放地址
          Request({
            url: Const.API_LIVE_URL,
            method: "post",
            data: {
              sn: StoreUtils.getValue(Const.SN),
              name: StoreUtils.getValue(Const.USERNAME),
              password: StoreUtils.getValue(Const.PASSWORD)
            }
          }).then(res => {
            if (ResUtil.isSuccess(res)) {
              this.appId = res.value.appId;
              this.playVideo(res.value.liveUrl);
            }
          });

        } else { // 直播结束
          // 播放预定义的视频
          this.playVideo(Const.M3U8_DEFAULT);
        }
      },

      immediate: true
    }
  },

  // 方法列表
  methods: {
    /**
     * 播放直播
     * @param sourceSrc
     */
    playVideo(sourceSrc) {
      this.playerOptions.width = window.screen.width;
      this.playerOptions.sources[0].src = sourceSrc;
      this.playerOptions.autoplay = true;
    },

    /**
     * 视频设备适配
     */
    videoDetailRender() {
      if (deviceInfo.devicePlatform != "PC") {
        var maincontainer = document.getElementsByClassName(
          "index_mainContainer"
        )[0];
        var videoDOm = document.getElementById("videoPlayer");
        var detailDOm = document.getElementById("video-detail");
        detailDOm.style.position = "absolute";
        detailDOm.style.top = videoDOm.offsetHeight + "px";
        detailDOm.style.height = `calc(100% - ${videoDOm.offsetHeight}px)`;
        maincontainer.style.height = videoDOm.offsetHeight + "px";
      }
    },

    getVideoTag() {
      var videoPlayerDom = document.getElementById("videoPlayer");
      return videoPlayerDom.getElementsByTagName("video")[0];
    }
  },

  mounted: function() {
    this.$nextTick(function() {
      this.videoDetailRender();
    });
  }
};
</script>
